<template>
    <div>
        <el-row>
            <el-col :span="24">
                <h2>{{ title }}</h2>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <el-input v-model="searchQuery" placeholder="搜索..."></el-input>
            </el-col>
            <el-col :span="5"><el-button @click="selectSquadListByNames">搜索</el-button></el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addSquad">新增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table 
                    :data="squads" 
                    style="width: 100%"
                    @expand-change="handleExpandChange">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table 
                                :data="props.row.members" 
                                style="width: 100%">
                                <el-table-column 
                                    prop="id" 
                                    label="ID" 
                                    width="50">
                                </el-table-column>
                                <el-table-column 
                                    prop="nickName" 
                                    label="姓名" 
                                    width="120">
                                </el-table-column>
                                <el-table-column 
                                    prop="gender" 
                                    label="性别" 
                                    width="80">
                                </el-table-column>
                                <el-table-column 
                                    prop="age" 
                                    label="年龄" 
                                    width="80">
                                </el-table-column>
                                <el-table-column 
                                    label="操作" 
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="50"></el-table-column>
                    <el-table-column prop="name" label="名称" width="180"></el-table-column>
                    <el-table-column prop="num" label="人数" width="100"></el-table-column>
                    <el-table-column prop="integral" label="积分" width="100"></el-table-column>
                    <el-table-column prop="slogan" label="口号" width="200"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { selectSquadList, selectSquadListByName } from "@/api/squadApi"
import { selectUserBySquadId, deleteUser } from "@/api/userApi"

export default {
    name: "SquadList",
    data() {
        return {
            title: "队伍列表",
            squads: [],
            searchQuery: ""
        };
    },
    methods: {
        addSquad() {
            this.$router.push("/add")
        },
        selectSquadList() {
            selectSquadList().then(response => {
                this.squads = response.data;
            })
        },
        selectSquadListByNames(){
            selectSquadListByName(this.searchQuery).then(response => {
                this.squads = response.data;
            })
        },
        handleExpandChange(row, expandedRows) {
            if (expandedRows.length > 0) {
                selectUserBySquadId(row.id).then(response => {
                    this.$set(row, 'members', response.data);
                }).catch(error => {
                    this.$message.error('获取小组成员失败');
                    console.error(error);
                });
            }
        },
        handleDelete(row) {
            this.$confirm('确认删除该成员吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteUser(row.id,row.squadId).then(response => {
                    if (response.code === 200) {
                        this.$message.success('删除成功');
                        this.handleExpandChange({ id: row.squadId }, [true]);
                        // 刷新页面
                        this.selectSquadList();
                    } else {
                        this.$message.error(response.message || '删除失败');
                    }
                }).catch(error => {
                    this.$message.error('删除失败');
                    console.error(error);
                });
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        }
    },
    created() {
        this.selectSquadList()
    }
};
</script>

<style scoped>
.el-table {
    margin-top: 20px;
}
</style>